<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./fonts/css/font-awesome.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>
<body>
    <!-- 顶栏 start -->
    <div class="top_nav">
        <nav>
            <ul>
                <li>
                    <a href="">
                        <img src="https://www.cnblogs.com/images/logo.svg?v=R9M0WmLAIPVydmdzE2keuvnjl-bPR7_35oHqtiBzGsM" alt="">
                    </a>
                </li>
                <li>首页</li>
                <li>新闻</li>
                <li>博问</li>
                <li>专区</li>
                <li>闪存</li>
                <li>怀旧</li>
                <li>班级</li>
                <li class="find_expand" onmouseover="show()" onmouseout="hide()">发现
                    <i class="fa fa-chevron-down"></i>
                    <div id="more">
                        <p><a href="">园子</a></p>
                        <p><a href="">招聘</a></p>
                        <p><a href="">小组</a></p>
                        <p><a href="">找找看</a></p>
                    </div>
                </li>
            </ul>

            <ul class="top_nav_right">
                <li>
                    <form action="">
                        <input type="text" name="" id="" placeholder="代码改变世界">
                        <i class="fa fa-search"></i>
                    </form>
                </li>
                <li>登录</li>
                <li>注册</li>
            </ul>
        </nav>
    </div>
    <!-- 顶栏 end -->

    <!-- 广告间隔线 start -->
    <div class="septal_line">
        <img src="https://common.cnblogs.com/images/banner/bannerbar.png?id=3" alt="">
    </div>
    <!-- 广告间隔线 end -->

    <!-- 主体 start -->
    <div class="main_content">
        <div class="main">
            <!--左边 start-->
            <div class="main_left">
                <li><i class="fa fa-eercast"></i>精华</li>
                <li><i class="fa fa-caret-square-o-right"></i>候选</li>
                <li><i class="fa fa-book"></i>订阅</li>
                <li><i class="fa fa-star"></i>关注</li>
                <li><i class="fa fa-comments"></i>我评</li>
                <li><i class="fa fa-heart"></i>我赞</li>
                <li><i class="fa fa-sign-in"></i>更多</li>
            </div>
            <!--左边 end-->

            <!--中间 start-->
            <div class="main_center">
                <div class="card">
                    <div class="card_recom">【编辑推荐】一文读懂 MySQL 的索引结构及查询优化 (9/1113) »</div>
                    <div class="card_recom">【编辑推荐】一文读懂 MySQL 的索引结构及查询优化 (9/1113) »</div>
                    <div class="card_recom">【编辑推荐】一文读懂 MySQL 的索引结构及查询优化 (9/1113) »</div>
                    <div class="card_recom">【编辑推荐】一文读懂 MySQL 的索引结构及查询优化 (9/1113) »</div>
                    <div class="card_recom">【编辑推荐】一文读懂 MySQL 的索引结构及查询优化 (9/1113) »</div>
                </div>

                <div class="card_all">

                    <div class="card_main">
                        <a>微服务实战系列（四）-注册中心springcloud alibaba nacos</a>
                            <div class="card_pic">
                                <img src="" alt="">
                            </div>
                            <span class="card_show">微服务实战系列（四）-注册中心springcloud alibaba nacos ...</span>
                            <div class="card_name">
                                <span class="card_id">软件老王</span>
                                <span class="card_time">2020-09-25 13:56</span>
                                <span class="card_visit">
                                    <i class="fa fa-thumbs-o-up">0</i>
                                    <i class="fa fa-comments">0</i>
                                    <i class="fa fa-eye">0</i>
                                </span>
                            </div>
                    </div>
                    <div class="card_main">
                        <a>微服务实战系列（四）-注册中心springcloud alibaba nacos</a>
                            <div class="card_pic">
                                <img src="" alt="">
                            </div>
                            <span class="card_show">微服务实战系列（四）-注册中心springcloud alibaba nacos ...</span>
                            <div class="card_name">
                                <span class="card_id">软件老王</span>
                                <span class="card_time">2020-09-25 13:56</span>
                                <span class="card_visit">
                                    <i class="fa fa-thumbs-o-up">0</i>
                                    <i class="fa fa-comments">0</i>
                                    <i class="fa fa-eye">0</i>
                                </span>
                            </div>
                    </div>
                    <div class="card_main">
                        <a>微服务实战系列（四）-注册中心springcloud alibaba nacos</a>
                            <div class="card_pic">
                                <img src="" alt="">
                            </div>
                            <span class="card_show">微服务实战系列（四）-注册中心springcloud alibaba nacos ...</span>
                            <div class="card_name">
                                <span class="card_id">软件老王</span>
                                <span class="card_time">2020-09-25 13:56</span>
                                <span class="card_visit">
                                    <i class="fa fa-thumbs-o-up">0</i>
                                    <i class="fa fa-comments">0</i>
                                    <i class="fa fa-eye">0</i>
                                </span>
                            </div>
                    </div>
                </div>
            </div>
            <!--中间 end-->

            <div class="main_right">
                <span>【推荐】Wyn Enterprise，嵌入式商业智能报表软件  </span>
                <span>【推荐】Wyn Enterprise，嵌入式商业智能报表软件  </span>
                <span>【推荐】Wyn Enterprise，嵌入式商业智能报表软件  </span>
            </div>
        </div>
    </div>
    <!-- 主体 end -->

    <!-- 页脚 start -->
    <div class="footer">
        <div class="friend_link">
            友情链接:
            <a href="">桂云</a>
            <a href="">阿里云</a>
            <a href="">百度云</a>
            <a href="">华为云</a>
            <a href="">京东云</a>
            <a href="">网易云</a>
            <a href="">站长之家</a>
            <a href="">虎扑软件</a>
            <a href="">腾讯云</a>
            <a href="">腾讯安全</a>
        </div>
        <div class="footer-splitter"></div>
        <div class="footer_bottom">
            <div>Powered by .NET Core on Kubernetes</div>
            <div class="footer_for_us">
                <a href="">关于博客园</a>
                <a href="">联系我们</a>
                <a href="">广告服务</a>
                <a href="">人才服务</a>
                <a href=""> ©2004-2020</a>
                <a href="">博客园</a>
                <a href="">保留所有权利</a>
                <a href="">沪ICP备09004260号</a>
            </div>
        </div>
    </div>
    <!-- 页脚 end -->
</body>
</html>